<template>
  <div class="out-contain">
    <!-- top最底层 -->
    <header>
      <navbar ref="nav"></navbar>
    </header>
    <div class="container">
      <!-- side侧边导航 -->
      <aside v-show="screenWidth < 500 ? false : true">
        <left-side @getRouters="getRouters" ref="side"></left-side>
      </aside>
      <!-- 内容区 -->
      <main>
        <app-main :saveRouter="saveRouter"></app-main>
      </main>
    </div>

  </div>
</template>

<script>
import leftSide from '../layout/leftSide.vue';
import navbar from '../layout/navbar.vue';
import appMain from '../layout/appMain.vue';
export default {
  components: {
    leftSide,
    navbar,
    appMain
  },
  data() {
    return {
      saveRouter: {},
      screenWidth: window.innerWidth, // 页面宽度
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    getRouters(val) {
      this.saveRouter = val
    },
    // 侦听页面宽度变化
    handleResize(){
      this.screenWidth = window.innerWidth;
      if(this.screenWidth < 800){
        this.$refs.side.resizeCollapse()
        this.$refs.nav.resizeCollapse('false')
      }
      if(this.screenWidth > 800){
        this.$refs.nav.resizeCollapse('true')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.out-contain {
  height: 100vh;
}

header {
  height: 50px;
  line-height: 50px;
}

.container {
  height: calc(100vh - 50px);
  width: 100%;
  display: flex;
}

aside {
  height: 100%;
}

main {
  flex: 1;
  min-height: 0px;
  min-width: 0px;
  background-color: #fffdfd;
}
</style>